<template>
    <div style="height: 100%;width: 100%">
        <!--        相关操作-->
        <div class="buttonCardLayout">
            <el-card class="box-card">
                <div style="display: inline-block;width: 100%">
                    <!--                批量删除-->
                    <el-button type="primary" class="batchDeleteButton"  @click="batchDeleteAdvertisement">批量删除</el-button>
                    <!--                新增广告-->
                    <el-button type="primary" class="addButton" @click="dialogVisible=true,dialogTitle='新增广告信息'">新增</el-button>
                    <!--                查询广告-->
                    <el-input
                            class="queryInput"
                            placeholder="请输入查询标题内容"
                            prefix-icon="el-icon-search"
                            @input="queryByCondition"
                            v-model="queryTitleLike">
                    </el-input>

                </div>

            </el-card>
        </div>
        <!--        表格内容-->
        <div class="tableCardLayout" >
            <el-card class="box-card">
                <el-table
                        :data="advertisementData"
                        :highlight-selection-row="true"
                        @selection-change="changeSelectedIds"
                        height="600"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            sortable
                            label="标题">
                    </el-table-column>
                    <el-table-column
                            prop="toPageUrl"
                            label="跳转界面">
                        <template slot-scope="scope">
                            <el-link :underline="false" :href="scope.row.toPageUrl">{{scope.row.toPageUrl}}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="pictureUrl"
                            label="图片">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.pictureUrl!=null" type="info" size="small" @click="toPictureUrl(scope.row.pictureUrl)">查看图片</el-button>
                            <el-button v-else type="info" size="small" disabled>添加图片</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="审核状态">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.auditStatue"
                                    @change="changeAuditStatue(scope.row)"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="0"
                                    inactive-color="#ff4949">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            sortable
                            prop="createTime"
                            label="发布时间">
                        <template slot-scope="scope">
                            {{scope.row.createTime | dateFormatFun(2)}}
                        </template>
                    </el-table-column>


                    <el-table-column
                            width="300"
                            label="操作" >
                        <template slot-scope="scope">
                            <el-button type="warning" size="small" @click="updateAdvertisementData(scope.row.id)">编辑</el-button>
                            <el-button type="danger"  size="small" @click="deleteAdvertisementData(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

        </div>

        <!--        分页设置-->
        <div class="pageCardStyle">
            <el-card class="box-card">
                <el-pagination
                        @size-change="changePageSize"
                        @current-change="changePageIndex"
                        :page-sizes="[8, 16, 24, 32]"
                        :page-size="pageSize"
                        :pager-count="5"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalAdvertisementsNum">
                </el-pagination>
            </el-card>
        </div>

        <!--        更新广告弹出框-->
        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="40%"
                top="10vh"
                @close="closeDialog"
                :fullscreen="false"
                :show-close="false"
                center>
            <template slot="title">

                <el-row style="width: 100%">
                    <el-col :span="8">
                        &nbsp;
                    </el-col>
                    <!--                    标题显示-->
                    <el-col :span="8" style="text-align: center;font-size: 20px">
                        <span>{{dialogTitle}}</span>
                    </el-col>
                    <!--                    右上角按钮-->
                    <el-col :span="8">
                        <div class="dialog_title">
                            <!--                    关闭按钮-->
                            <div class="dialog_title_icon" @click="dialogVisible=false">
                                <i class="el-icon-close"></i>
                            </div>
                        </div>
                    </el-col>
                </el-row>

            </template>


            <!--            输入广告内容-->
            <div v-if="dialogTitle=='新增广告信息' || dialogTitle=='编辑广告信息'">
                <!--                输入广告附属信息-->
                <div>
                    <el-card class="box-card">
                        <el-row :gutter="20">
<!--                            输入广告标题-->
                            <el-col :span="8">
                                <el-input
                                        placeholder="请输入广告标题"
                                        prefix-icon="el-icon-guide"
                                        v-model="dialogAdvertisementInfo.title">
                                </el-input>
                            </el-col>
<!--                            输入跳转路径-->
                            <el-col :span="8">
                                <el-input
                                        prefix-icon="el-icon-position"
                                        placeholder="请输入跳转路径"
                                        v-model="dialogAdvertisementInfo.toPageUrl">
                                </el-input>
                            </el-col>
                            <el-col :span="8" class="allowCommentStyle">
                                <el-switch
                                        v-model="dialogAdvertisementInfo.auditStatue"

                                        active-color="#13ce66"
                                        inactive-color="#ff4949"
                                        :active-value="1"
                                        :inactive-value="0"
                                        active-text="审核通过"
                                        inactive-text="审核未通过">
                                </el-switch>
                            </el-col>


                        </el-row>

                    </el-card>
                </div>
                <!--                输入广告主体-->
                <div class="blogContentStyle">
                    <el-card style="min-height: 300px;text-align: center">
                        <div style="width: 100%;margin-bottom: 5px;">
                            <span>注意:图片比例为3:4(图片长宽比例)</span>
                        </div>
                        <el-upload
                                class="avatar-uploader"
                                :action="actionUrl"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :headers="headerObjs">
                            <img v-if="dialogAdvertisementInfo.pictureUrl" :src="dialogAdvertisementInfo.pictureUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-card>

                </div>
                <!--                底部栏-->
                <div>
                    <el-card class="box-card" style="text-align: center">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addOrUpdateAdvertisement">确 定</el-button>
                    </el-card>

                </div>

            </div>

        </el-dialog>
    </div>
</template>

<script>


    import {constants} from "@/common/constants";

    export default {
        name: "AdvertisementComponent",
        components:{},
        data() {
            return {
                advertisementData: [],                   //所有的广告信息
                totalAdvertisementsNum: 0,                //广告总的数目
                dialogAdvertisementInfo:{
                    auditStatue : 1,
                },                 //弹出框的广告信息内容
                actionUrl:"http://"+constants.server+":"+constants.port+"/index/attach/upload" ,//上传url
                headerObjs:{
                    token: JSON.parse(localStorage.getItem("user")).token,
                },  //设置头像上传的请求头
                queryTitleLike:"",             //按照标题模糊查询
                dialogTitle:"",                 //根据dialog标题显示dialog内容
                dialogVisible: false,           //新增广告弹出框是否展示
                selectedIds:[],                 //目前选中的id集合
                pageIndex:1,                    //第xx页
                pageSize:16,                     //页面大小

            }
        },
        created() {
            this.mySetItem("breadCrumb",JSON.stringify("广告管理"));
            this.queryAllAdvertisements();
        },
        methods:{
            //打开图片
            toPictureUrl(url){
                window.open(url);
            },
            //新增广告信息
            addOrUpdateAdvertisement(){
                if (this.dialogTitle=='新增广告信息'){            //新增
                    this.request.post("/index/advertisement/addAdvertisement",this.dialogAdvertisementInfo).then(res=>{
                        if (res.code=='200'){
                            this.$message({
                                message: res.data,
                                type: 'success'
                            });
                            this.queryAllAdvertisements();
                        }else {
                            this.$message({
                                message: res.data,
                                type: 'error'
                            });
                        }
                    })
                }else{                      //更新
                    this.request.post("/index/advertisement/updateAdvertisement",this.dialogAdvertisementInfo).then(res=>{
                        if (res.code=='200'){
                            this.$message({
                                message: res.data,
                                type: 'success'
                            });
                            this.queryAllAdvertisements();
                        }
                    })
                }

                this.dialogVisible=false;
            },
            //图片上传成功之后执行的方法
            handleAvatarSuccess(res){
                if (res.code=="200"){
                    // this.dialogAdvertisementInfo.pictureUrl=res.data;
                    this.$set(this.dialogAdvertisementInfo,"pictureUrl",res.data);
                }
            },
            //查询所有的广告信息
            queryAllAdvertisements(){
                this.request.get("/index/advertisement/queryAllAdvertisements",{
                    params:{
                        queryTitleLike: this.queryTitleLike ,
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize,
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        this.advertisementData=res.data.advertisements;
                        this.totalAdvertisementsNum=res.data.totalAdvertisementsNum;
                    }
                })
            },
            //改变滑块触发的事件
            changeAuditStatue(advisementData){
                this.$confirm('确定改变该广告的审核状态吗？', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.request.get("/index/advertisement/updateAdvisementAuditStatue",{
                        params:{
                            id: advisementData.id,
                        }
                    }).then(res=>{
                        if (res.code=='200'){
                            this.$message({
                                message: res.data,
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                message: res.data,
                                type: 'error'
                            });
                        }
                        this.queryAllAdvertisements();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消该操作'
                    });
                    this.queryAllComments();
                });
            },
            //编辑广告内容
            updateAdvertisementData(advertisementId){
                this.dialogTitle="编辑广告信息";
                this.request.get("/index/advertisement/queryAdvertisementById",{
                    params:{
                        id: advertisementId,
                    }
                }).then(res=>{
                    if (res.code=='200'){
                        this.dialogAdvertisementInfo=res.data;
                        this.$set(this.dialogAdvertisementInfo,"pictureUrl",res.data.pictureUrl);
                        console.log(this.dialogAdvertisementInfo);
                    }else{
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
                this.dialogVisible=true;
            },
            //删除广告
            deleteAdvertisementData(advertisementData){
                this.request.post("/index/advertisement/deleteAdvertisement",advertisementData).then(res=>{
                    if (res.code=='200'){
                        this.$message({
                            message: res.data,
                            type: 'success'
                        });
                        this.queryAllAdvertisements();
                    }else {
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
            },
            //批量删除广告
            batchDeleteAdvertisement(){
                this.request.post("/index/advertisement/batchDeleteAdvertisement",this.selectedIds).then(res=>{
                    if (res.code=='200'){
                        this.$message({
                            message: res.data,
                            type: 'success'
                        });
                        this.queryAllAdvertisements();
                    }else {
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
            },
            //改变分页中的页面大小
            changePageSize(newPageSize){
                this.pageSize=newPageSize;
                this.queryAllAdvertisements();
            },
            //改变当前页的序号
            changePageIndex(newPageIndex){
                this.pageIndex=newPageIndex;
                this.queryAllAdvertisements();
            },
            //关闭新增广告弹出框触发的事件
            closeDialog(){
                this.initDialogState();
            },
            //改变选中的行时调用的方法
            changeSelectedIds(ids){
                this.selectedIds=ids.map(v =>v.id)
            },
            //初始化广告弹出框
            initDialogState(){
                this.dialogAdvertisementInfo={
                    auditStatue : 1,
                };
            },
            //条件模糊查询广告
            queryByCondition(){
                this.queryAllAdvertisements();
            },
        }
    }
</script>

<style scoped>
    .buttonCardLayout{
        padding:  10px;


    }

    .myTag{
        width: 100%;
        text-align: center;
    }

    .dialog_title{
        text-align: right;
    }

    .dialog_title_icon{
        display: inline-block;
        margin: 0px 5px;
        cursor: pointer;
        pointer-events: auto;
    }

    .blogContentStyle{
        padding: 10px 0px ;
    }

    .avatar-uploader{
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px #0000001a solid;
        height: 400px;
        width: 300px;
    }


    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .tableCardLayout{
        padding:  0px 10px 10px 10px;
    }

    .pageCardStyle{
        padding:  0px 10px 10px 10px;
        text-align: center;
    }

    .allowCommentStyle{
        padding-left: 10px;
        padding-right: 10px;
        line-height: 40px;
        font-size: 20px;
    }

    .addButton{
        width: 100px;
        border-radius: 10px;
        background: #63b0f4c2;
        border-color: #B5D0EC;
        margin-right: 10px;
        margin-left: 0px;
    }

    .batchDeleteButton{
        width: 100px;
        border-radius: 10px;
        background: rgba(232, 87, 108, 0.47);
        border-color: #d08dba5c;
        margin-right: 10px;
    }

    .queryInput{
        display: inline-block;
        width: 250px;
        margin-right: 10px;
    }

    /deep/ .el-card__body, .el-main {
        padding: 20px;
        justify-content: center;
        flex-wrap: wrap;
        display: flex;
    }


    /deep/ .cell{
        height: 40px;
    }

</style>